<template>
  <!-- 患者签名 -->
  <section>
    <div class="form-tool">
      <div>
        <el-select v-model="form.informedId" @change="onChangeInform">
          <el-option v-for="(item,index) in informList" :key="index" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </div>
      <div>
        <el-button @click="$router.back()">
          <i class="vertical-middle el-icon-arrow-left"></i>
          <span class="vertical-middle">返回</span>
        </el-button>
      </div>
    </div>
    <div style="padding:20px 0;" v-html="html">
    </div>
    <div>
      <el-checkbox v-model="form.checkbox">我已阅读以上内容</el-checkbox>
    </div>
    <canvasSign ref="canvasSign" style="padding:20px 0;" :width="600"></canvasSign>
    <div>
      <el-button :loading="btnLoading" type="primary" @click="onSubmit">保存签名</el-button>
      <el-button :loading="btnLoading" @click="onReset">重置签名</el-button>
    </div>
  </section>
</template>
<script>
import OSS from "@/_js/OssFile.js";
export default {
  components: {
    canvasSign: () => import("@/components/canvasSign.vue")
  },
  data() {
    return {
      btnLoading: false,
      html: "",
      form: {
        patientId: "",
        checkbox: true,
        informedId: "",
        status: 1,
        url: ""
      },
      informList: []
    };
  },
  created() {
    let th = this;
    th.verifyUrlAttack().then(res => {
      th.form.patientId = th.jieMi(th.$route.query.id);
      th.getInformedConsent();
    });
  },
  methods: {
    onSubmit() {
      let th = this;
      if (!th.form.informedId) {
        th.$message.warning("请选择一份同意书");
        return;
      }
      if (!th.form.checkbox) {
        th.$message.warning("请先阅读所有内容");
        return;
      }
      th.btnLoading = true;
      //上传图片
      let upFile = async function(blob) {
        let fileName = `${new Date().getTime()}${th.form.patientId}.png`;
        let config = await th.$api.getTemporaryAKAndToken("web");
        let fileReq = await OSS.uploadBlobImage(blob, fileName, config);
        if (!fileReq || !fileReq.executed) {
          th.btnLoading = false;
          th.$message.error("上传失败");
          return false;
        }
        th.form.url = fileReq.path;
        return true;
      };
      //提交资料
      let fn = async function(blob) {
        let uf = await upFile(blob);
        if (!uf) {
          return;
        }
        th.$api
          .signInformedConsent(th.form)
          .then(res => {
            th.btnLoading = false;
            if (res.executed) {
              th.$message.success("保存成功");
              th.$router.back();
            } else {
              th.$message.error(res.message);
            }
          })
          .catch(res => {
            th.btnLoading = false;
          });
      };
      th.$refs["canvasSign"].save(function(val) {
        //url转blob
        fn(th.$utils.dataURLToBlob(val));
      });
    },
    onReset() {
      let th = this;
      th.$refs["canvasSign"].clear();
    },
    onChangeInform() {
      let th = this;
      let data = th.informList.find(d => {
        return d.id == th.form.informedId;
      });
      if (data) {
        th.html = data.text;
      }
    },
    getInformedConsent() {
      let th = this;
      let j = {
        patientId: th.form.patientId
      };
      th.$api.getInformedConsent(j).then(res => {
        if (res.executed) {
          th.informList = res.dataBody.list;
        }
      });
    }
  }
};
</script>